<template>
    <div class="cont">
        <div class="header">
            <div class="header-left">
                <el-input style="width: 170px;" placeholder="请输入账号" v-model="sou1"/> 
                <el-input style="width: 170px;margin: 0 15px;" placeholder="请输入手机号" v-model="sou2" />
                
                <div class="search" @click="search"><el-icon style="color: #fff;"><Search /></el-icon></div>
            </div>
            <div class="header-right">
                <el-button type="primary" style="width: 100px;" @click="dialogFormVisible = true">+添加</el-button>
            </div>
        </div>
        <div class="container">
            <el-table :data="tableData" style="width:100%">
                <el-table-column label="头像" >
                    <template #default="scope">
                        <img :src='BaseUrl+"/images"+scope.row.icon' alt="头像" style="width: 50px; height: 50px; border-radius: 50%;">
                    </template>
                </el-table-column>
                <el-table-column prop="adminName" label="用户名" />
                <el-table-column prop="account" label="账号" />
                <el-table-column label="全部">
                    <template #header>
                        <select class="myse"  v-model="srl" >
                            <option value="" style="color:#909399 ;">全部</option>
                            <option value="0" style="color:#909399 ;">管理员</option>
                            <option value="1" style="color:#909399 ;">商家</option>
                        </select>
                    </template>
                    <template #default="scope">
                        {{ compileTemplata(scope.row.identity)}}
                    </template> 
                </el-table-column>
                <el-table-column  label="性别"  >
                    <template #default="scope">
                        {{ compileTemplate(scope.row.sex) }}
                    </template> 
                </el-table-column>
                <el-table-column prop="tel" label="手机号"  />
                <el-table-column prop="name" label="操作"  >
                    <template #default="scope">
                        <el-button type="danger" @click="delrs(scope.row)">删除</el-button>
                    </template> 
                </el-table-column>
            </el-table>
            <div class="foot">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :page-count="total"
                        @current-change="pageChange"/>
            </div>
        </div>
        <el-dialog
    v-model="centerDialogVisible"
    width="500"
    align-center>
    <span>确定删除本条信息吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="deletel">
          确认
        </el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisible" title="添加管理员" width="500" center :show-close="false">
    <el-form :model="form" class="form">
      <div class="one">
        <label for="">头像:</label>
        <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="files"
            :data="uploadData"
            :headers="headers"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
        <div class="one">
          <label for="">用户名:</label>
          <el-input v-model="form.adminName" placeholder="请输入用户名" style="width: 300px;"/>
        </div>
        <div class="one">
          <label for="">账号:</label>
          <el-input v-model="form.account" placeholder="请输入账号" style="width: 300px;"/>
        </div>
       <div class="one">
          <label for="">密码:</label>
          <el-input v-model="form.password" placeholder="请输入密码" style="width: 300px;"/>
       </div>
      <div class="one">
        <label for="">手机号:</label>
        <el-input v-model="form.tel" placeholder="请输入手机号" style="width: 300px;"/>
      </div>
      <div class="one">
        <label for="">标识:</label>
        <el-select v-model="form.identity" placeholder="请选择标识" style="width: 300px;"> 
          <el-option label="管理员" value="0" />
          <el-option label="商家" value="1" />
        </el-select>
      </div>
        <div class="two">
            <label for="" class="se">性别:</label>
            <el-radio-group v-model="form.sex" >
            <el-radio value="0" size="large">男</el-radio>
            <el-radio value="1" size="large">女</el-radio>
        </el-radio-group>
        </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addw">
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
    </el-dialog>
    </div>
   
  
</template>
<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

import axios from 'axios';
let BaseUrl='http://192.168.199.11:8001/ShoppingStreet'
let imageUrl=ref("");
let headers={
    token:localStorage.getItem("token")

}
const handleAvatarSuccess  = (response,uploadFile) => {
console.log('success')
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  form.icon=response.data[0]
}

let uploadUrl=BaseUrl+"/admin/showImages"
let uploadData=reactive({
    path:"/path"
})
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
    ElMessage.error('头像格式只能时 JPG/png/jpeg/gif 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error('头像不能大于4MB!')
    return false
  }
 
  return true
}
onMounted(() => {
    // guanl();
    search();
})
 
let dialogFormVisible = ref(false)
let form = reactive({
    icon: '',
    adminName: '',
    account: '',
    password: '',
    tel:'',
    identity: '',
    sex: '',
})
//分页
    let pageSize = ref(2);
    let currentPage = ref(1);
    let total = ref(1);
    const pageChange = (newPage) => {
        currentPage.value = newPage;
        if(sou1.value!='' || sou2.value!=''){
            search();
        }else{
            srls();
        }
    };
   
//管理员列表
let tableData = ref([]);
function guanl(){
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/admin/adminList',{
        pageIndex:currentPage.value,
        pageSize:pageSize.value,
    }).then(res=>{
        tableData.value=res.data.data.adminList;
        console.log(tableData);
        total.value=res.data.data.pageCount;
    })
    console.log(111);
    
}
//性别
let compileTemplate = (value) => {
  if (value === '0') {
    return '男';
  } else if (value === '1') {
    return '女';
  }
};
//身份
let compileTemplata = (value) => {
  if (value === '0') {
    return '管理员';
  } else if (value === '1') {
    return '商家';
  }
};

//删除
let scop = ref({});
let centerDialogVisible = ref(false)
function delrs(scope){
    scop.value = scope;
    centerDialogVisible.value = true;
}
function deletel(){
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/admin/delete',{
        adminId:scop.value.adminId,
        delFlagL:'0',
    }).then(res=>{
        console.log(res);
        centerDialogVisible.value=false;
        guanl();
    })
}
//账户 搜索
let sou1 = ref('');
let sou2 = ref('');
function search(event){
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    axios.post(BaseUrl+'/admin/search',{
        pageIndex:currentPage.value,
        pageSize:pageSize.value,
        account:sou1.value,
        tel:sou2.value,
    }).then(res=>{
        console.log(res);
        tableData.value=res.data.data.adminList;
        total.value=res.data.data.pageCount;
    })
}
//身份搜索
let srl = ref('');
watch(srl, (newValue, oldValue) => {
      // 当选中的值改变时，这个函数会被调用
    //   console.log(`选中的值从 ${oldValue} 变更为 ${newValue}`);
    srl.value = newValue;
    srls(srl.value);
    });
function srls(){
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    if( srl.value===''){
        guanl();
    }else{
        axios.post(BaseUrl+'/admin/adminList',{
            pageIndex:currentPage.value,
            pageSize:pageSize.value,
            identity:String(srl.value),
        }).then(res=>{
            console.log(res);
            tableData.value=res.data.data.adminList;
            total.value=res.data.data.pageCount;
        })
    }
}
//添加
function addw(){
    dialogFormVisible.value = false;
    axios.defaults.headers.common['token'] = localStorage.getItem("token");
    console.log(form)
    axios.post(BaseUrl+'/admin/addAdmin',form).then(res=>{
        console.log(res);
        guanl();
    })
}

</script>
<style scoped lang="less">
.cont {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding: 30px 5% 0;
    .header{
        width: 100%;
        height: 32px;
        margin-bottom: 20px;
        .header-left{
            width: 40%;
            height: 32px;
            float: left;
            .search{
                display: inline-block !important;
                width: 32px;
                height: 32px;
                background-color: #5981E1;
                border-radius: 5px;
                text-align: center;
                line-height: 32px;
            }
        }
        .header-right{
            display: inline-block;
            width: 10%;
            height: 32px;
            float: right;
           .el-button{
                width: 100%;
                height: 32px;
                background-color: #5981E1;
                color: #fff;
            }
        }
    }
    .container{
        width: 100%;
        height: 540px;
        background-color: #fff;
        border-radius: 10px;
        position: relative;
        :deep(.el-table .cell){
            display:flex;
            align-items: center;
            justify-content: center;
        }
    }
}
.foot{
    width: 100%;
    height: 10%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0px;
    .el-pagination{
        justify-content: center;
    }
  }
   .form{
    display: flex;
    flex-direction: column;
    align-items: center;
    .one{
        width: 80%;
        display: inline-flex;
        justify-content: space-between;
        margin: 5px 0;
        label{
            width: 100px;
            text-align: right;
            padding-right: 10px;
            line-height: 32px;
            margin-right: 30px;
        }
    }
    .two{
        width: 80%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        margin: 5px 0;
        .se{
            width: 100px;
            text-align: right;
            box-sizing: border-box;
            padding-right: 15px;
            line-height: 32px;
            margin-right: 30px;
        }
    }
   }
   :deep(.el-table td.el-table__cell){
       border-bottom: none;
   }
   /deep/.el-table__inner-wrapper:before{
    display: none;
   }
   .myse{
    color:#909399;
    border: none;
   }
   .myse:focus{
    outline: none;
   }
   :deep(.el-table .cell){
    text-align: center;
   }
</style>